<!--  -->
<template>
  <div class="reportcontent" ref="reportcontent">
    <at-button class="addbutton" type="primary" @click="blocktypedialog=true">添加报表</at-button>
    <router-link to="/NewReport">
      <at-button class="designbutton" type="primary">设计报表</at-button>
    </router-link>
    <DragChart
      :list="item"
      v-for="(item,index) in chartlist"
      :key="index"
      @changelist="changelist"
      :chartcontainerwidth="chartcontainerwidth"
    ></DragChart>

    <at-modal
      v-model="blocktypedialog"
      title="请选择报表类型"
      @on-confirm="chooseblocktype"
      @on-cancel="blocktypedialog=false"
      width="900"
      cancelText="取消"
      okText="确认"
    >
      <div class="blockcontent">
        <div class="typechoose">
          <img src="../../assets/images/blockexample/lineblock.jpg" @click="radio='1'" />
          <at-radio v-model="radio" label="1" border size="small">折线图</at-radio>
        </div>
        <div class="typechoose">
          <img src="../../assets/images/blockexample/ringblock.jpg" @click="radio='2'" />
          <at-radio v-model="radio" label="2" border size="small">环图</at-radio>
        </div>
        <div class="typechoose">
          <img src="../../assets/images/blockexample/pieblock.jpg" @click="radio='3'" />
          <at-radio v-model="radio" label="3" border size="small">饼图</at-radio>
        </div>
        <div class="typechoose">
          <img src="../../assets/images/blockexample/histogramblock.jpg" @click="radio='4'" />
          <at-radio v-model="radio" label="4" border size="small">柱状图</at-radio>
        </div>
        <div class="typechoose">
          <img src="../../assets/images/blockexample/barblock.jpg" @click="radio='5'" />
          <at-radio v-model="radio" label="5" border size="small">条形图</at-radio>
        </div>
      </div>
    </at-modal>

    <at-modal
      v-model="blockcontentdialog"
      title="请选择数据源"
      @on-confirm="addblock()"
      @on-cancel="blockcontentdialog=false"
      cancelText="取消"
      okText="确认"
    >
      <at-select v-model="addblocktitle" size="large" style="width: 300px" placeholder="请选择数据源">
        <at-option
          :value="item.title"
          v-for="(item,index) in analysisdata"
          :key="index"
        >{{item.title}}</at-option>
      </at-select>
    </at-modal>
  </div>
</template>

<script>
import DragChart from "./DragChart";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      analysisdata: [
        {
          title: "多媒体会议室A使用情况",
          chartData: {
            columns: ["日期", "使用次数", "使用人数"],
            rows: [
              { 日期: "5/1", 使用次数: 13, 使用人数: 12 },
              { 日期: "5/2", 使用次数: 35, 使用人数: 23 },
              { 日期: "5/3", 使用次数: 29, 使用人数: 22 },
              { 日期: "5/4", 使用次数: 17, 使用人数: 11 },
              { 日期: "5/5", 使用次数: 37, 使用人数: 21 },
              { 日期: "5/6", 使用次数: 45, 使用人数: 44 }
            ],
            showline: ["使用人数"]
          }
        },
        {
          title: "会议人员迟到情况",
          chartData: {
            columns: ["会议名称", "实到人数", "应到人数"],
            rows: [
              { 会议名称: "第一周例会", 应到人数: 13, 实到人数: 12 },
              { 会议名称: "第三周例会", 应到人数: 35, 实到人数: 23 },
              { 会议名称: "学习交流分享大会", 应到人数: 29, 实到人数: 22 },
              { 会议名称: "比赛总结", 应到人数: 17, 实到人数: 11 }
            ],
            showline: ["使用人数"]
          }
        },
        {
          title: "功能会议室209使用情况",
          chartData: {
            columns: ["日期", "使用次数", "使用人数"],
            rows: [
              { 日期: "5-1", 使用次数: 13, 使用人数: 12 },
              { 日期: "5-2", 使用次数: 35, 使用人数: 23 },
              { 日期: "5-3", 使用次数: 29, 使用人数: 22 },
              { 日期: "5-4", 使用次数: 17, 使用人数: 11 },
              { 日期: "5-5", 使用次数: 37, 使用人数: 21 },
              { 日期: "5-6", 使用次数: 45, 使用人数: 44 }
            ],
            showline: ["使用人数"]
          }
        }
      ],
      addblocktype: "",
      blocktypedialog: false,
      blockcontentdialog: false,
      addblocktitle: "",
      radio: "",
      chartcontainerwidth: ""
    };
  },

  components: { DragChart },

  computed: { ...mapState(["chartlist"]) },
  mounted() {
    this.chartcontainerwidth = window.getComputedStyle(
      this.$refs.reportcontent
    ).width;
  },
  methods: {
    changelist() {
      this.changeChartlist({
        list: this.chartlist
      });
    },
    addblock() {
      let list = JSON.parse(JSON.stringify(this.chartlist));
      let chartData = [];
      for (let i in this.analysisdata) {
        if (this.analysisdata[i].title == this.addblocktitle) {
          chartData = this.analysisdata[i].chartData;
          break;
        }
      }
      list.push({
        width: 0.3,
        height: 0.3,
        x: 0,
        y: 0,
        type: parseInt(this.radio),
        title: this.addblocktitle,
        chartData: chartData
      });
      this.changeChartlist({
        list: list
      });
      this.radio = "";
    },
    chooseblocktype() {
      this.blockcontentdialog = true;
    },
    ...mapMutations(["changeChartlist"])
  }
};
</script>
<style scoped lang="scss">
.reportcontent {
  width: 100%;
  height: 600px;
  position: relative;
  .addbutton {
    position: absolute;
    top: 0;
    right: 0;
  }
  .designbutton{
    position: absolute;
    top: 0;
    right: 100px;
  }
  .blockcontent {
    display: flex;
    justify-content: space-around;
    overflow-y: scroll;
    .typechoose {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 10px;
      img {
        height: 120px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>